<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Psychology Manage System</title>

		<!-- Favicon -->
		<link rel="shortcut icon" href="assets/img/favicon.png">


		<link rel="stylesheet" href="assets/css/element.css">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">

		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">
		<!-- vue -->
		<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.js"></script>
		<script src="assets/js/element.js"></script>
		<script src="assets/js/qs.js"></script>
		<script src="assets/util/localStorageUtil.js" ></script>
		<script src="assets/util/request.js" ></script>
		<script src="assets/util/jsencrypt.js"></script>


		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.min.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<!-- Main Wrapper -->
		<div class="main-wrapper login-body" id="login-vue" >

			<div class="login-wrapper">
				<div class="container">

					<img class="img-fluid logo-dark mb-2" src="assets/img/logo.png" alt="Logo">
					<div class="loginbox">

						<div class="login-right">
							<div class="login-right-wrap">
								<h1><strong>登录</strong></h1>
								<el-form :rules="rules" ref="ruleForm" :model="loginForm" >

									<el-form-item prop="email">
										<el-input type="email"
												  placeholder="邮箱"
												  required="true"
												  v-model="loginForm.email"
												  autocomplete="on">
										</el-input>
									</el-form-item>


									<el-form-item prop="password">
										<el-input type="password"
												  placeholder="密码"
												  v-model="loginForm.password"
												  autocomplete="on"
												  @keyup.enter.native="login"
										>
										</el-input>
									</el-form-item>

									<div class="form-group">
										<div class="row">
											<div class="col-6">
												<div class="custom-control custom-checkbox">
													<input type="checkbox" class="custom-control-input" id="cb1" v-model="loginForm.rememberMe">
													<label class="custom-control-label" for="cb1">记住我</label>
												</div>
											</div>
											<div class="col-6 text-right">
												<a class="forgot-link" href="forgot-password.html">忘记密码 ?</a>
											</div>
										</div>
									</div>
									<button class="btn btn-lg btn-block btn-primary" type="button" v-on:click="login" v-loading.fullscreen.lock="fullscreenLoading" >登录</button>
									<div class="login-or">
										<span class="or-line"></span>
										<span class="span-or">or</span>
									</div>
									<!-- Social Login -->

									<div class=" mb-3" style="text-align: center">
										<span>其他登录方式</span>
										<a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101583722&redirect_uri=https://codegg.cn/qqlogin/success" class="tencent"><img style="width: 50px;margin-left: 10px"  src="assets/img/qq-logo1.png" alt="QQ 登录"></a>
										<a href="https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021002141656448&scope=auth_user&redirect_uri=https://codegg.cn/alipay/login&state=init" class="tencent"><img style="width: 50px;margin-left: 10px"  src="assets/img/alipay-logo.png" alt="支付宝 登录"></a>
									</div>

									<!-- /Social Login -->
									<div class="text-center dont-have">您是否已经有账户 ?   <a href="register.html" style="color: #4d4da7">注册</a></div>
								</el-form>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Main Wrapper -->

		<!-- jQuery -->
		<script src="assets/js/jquery-3.5.1.min.js"></script>

		<!-- Bootstrap Core JS -->
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- Feather Icon JS -->
		<script src="assets/js/feather.min.js"></script>

		<!-- Custom JS -->
		<script src="assets/js/script.js"></script>



	</body>

	<script>
		let storage = new Storage();
		const login = new Vue({
			el: "#login-vue",
			data(){

				const checkEmail = (rule,value,callback) =>{
					const pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
					if(!pattern.test(value)){
						callback(new Error("请输入格式正确的邮箱"))
					}else{
						callback();
					}

				};

				return{
					loginForm: {
						email: "",
						password: "",
						rememberMe: "",
						publicKey:""
					},
					encrypt: null,
					fullscreenLoading: false,
					rules: {
						email: [
							{validator: checkEmail,trigger: 'change'}
						],
						password: [
							{required: true,message:"请输入密码",trigger: 'blur'},
							{min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
						]
					}
				}

			},
			methods:{
				login(){
					this.$refs['ruleForm'].validate(valid =>{
						if(valid){
							this.initPublicKey();
							this.fullscreenLoading = true;
							service({
								method: 'post',
								url: '/user/login',
								data: Qs.stringify({
									email: this.loginForm.email,
									// password: this.loginForm.password,
									password: this.encrypt.encrypt(this.loginForm.password),
									rememberMe: this.loginForm.rememberMe
								}),
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
							}).then(response => {
								const data = response.data;
								storage.setItem({
									name: "routeMap",
									value: data.routeMap
								});
								storage.setItem({
									name: "userinfo",
									value: data.user
								})
								window.location.href=data.requestURI;
							}).finally(()=>{
								this.fullscreenLoading = false
							})
						}else{
							this.$message({message:"数据格式不正确",type:"error"})
						}
					})
				},

				initPublicKey(){
					this.encrypt = new JSEncrypt();
					this.encrypt.setPublicKey(storage.getItem("publicKey"))
				}

			},
			created(){
				getPublicKey();
			},
			mounted(){
				intThisPoint(this)
			}
		})

	</script>
</html>
